<template>
  <div class="container2">
    <div class="left">
      <sidebar
        @menu-selected="updateSelectedMenu"
        :mokid="$route.query.mokid"
      />
    </div>
    <div class="right">
      <h1 style="margin-bottom: 10px">当前选择：{{ selectedMenu.mingc }}</h1>

      <ul v-for="(item, idx) in wenzlb" :key="idx">
        <li @click="wenzxq(item)">{{ item.wenzbt }}</li>
      </ul>
    </div>
  </div>
</template>

<script>
import Sidebar from "./Sidebar.vue";
import _http from "../httpService";

export default {
  components: {
    Sidebar,
  },

  data() {
    return {
      selectedMenu: {},
      tuwxq: [],
      wenzlb: [],
    };
  },

  mounted() {
    let that = this;
  },

  watch: {
    // 监听 $route 对象的变化
    $route(to, from) {
      // to: 路由变化后的新对象
      // from: 路由变化前的旧对象
      console.log("路由变化了：", to, from);
      // 在这里执行你的逻辑，比如根据新的路由状态更新组件状态
      let that = this;

      _http
        .get("/wenz/yixlllmkWenz/list?suoslm=" + this.$route.query.suoslm)
        .then((resp) => {
          if (resp.data.success) {
            that.wenzlb = resp.data.result.records;
          }
        });
    },
  },

  methods: {
    updateSelectedMenu(menu) {
      let that = this;

      if (menu) {
        this.selectedMenu = menu;

        _http.get("/wenz/yixlllmkWenz/list?suoslm=" + menu.id).then((resp) => {
          if (resp.data.success) {
            that.wenzlb = resp.data.result.records;
          }
        });
      }
    },

    wenzxq(wenz) {
      localStorage.setItem("wenzxq", JSON.stringify(wenz));
      window.open("/#/wenzxq");
    },
  },
};
</script>

<style scoped>
li {
  font-size: 15px;
  position: relative;
  padding-bottom: 10px;
  margin-bottom: 10px;
  display: list-item;
}

li::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background-color: #0eb4b6;
}

.container2 {
  padding-left: 10%; /* 左侧留白 */
  padding-right: 10%; /* 右侧留白 */
  display: flex;
  height: 100vh; /* 让容器高度充满整个视口高度 */
}

.left {
  flex: 0 0 250px; /* 左侧容器固定宽度为250px */
  padding: 20px;
  box-sizing: border-box; /* 确保内边距不会增加容器宽度 */
}

.right {
  text-align: left;
  flex: 1; /* 右侧容器占据剩余空间的另一部分，这里设置为左侧的两倍 */
  padding: 20px;
  box-sizing: border-box; /* 确保内边距不会增加容器宽度 */
}
</style>
